﻿import QtQuick 2.7
import QtQuick.Controls 1.1
import QtQuick.Controls.Styles 1.4
import QtGraphicalEffects 1.0
Item{
    ProgressBar {
        value: slider.value
        width: parent.width/2
        height: 20
        anchors.centerIn: parent
        style: ProgressBarStyle {
            background: Rectangle {
                radius: 2
                color: "#DDDDDD"
                border.color: "gray"
                border.width: 1
                implicitWidth: 200
                implicitHeight: 24
            }
            progress: Rectangle {
                id:sourceId
                border.color: "transparent"
                color: "#70B11E"
                radius: parent.height/2
                anchors.centerIn: parent
                smooth: true
                LinearGradient{
                    anchors.fill: parent
                    anchors.margins: 1
                    start: Qt.point(0, 0)
                    end: Qt.point(parent.width, 0)
                    source:sourceId
                    gradient: Gradient {
                        GradientStop { position: 0.0; color: "#70B11E" }
                        GradientStop { position: 0.5; color: "#7DBF1E"}
                        GradientStop { position: 1.0; color: "#A8DF28" }
                    }
                }
                //                Rectangle {
                //                    anchors.right: endId.right
                //                    width: 20
                //                    height: 18
                //                    border.color: "transparent"
                //                    color: "#A8DF28"
                //                    clip: true
                //                    z:9
                //                }
            }
        }
    }
    Slider {
        id:slider
        value: 0.5
        anchors.bottom: parent.bottom
        width: 100
        height: 20
    }
    CloseButton{
       anchors.left:slider.right
       anchors.leftMargin: 10
       height: 24
       width: 24
       anchors.bottom: parent.bottom
    }
    function colorByIndex(index){
        console.log("index ",index)
        var color = Qt.rgba(120,180,41,index);return color;
        return Qt.rgba(Math.random(),Math.random(),Math.random(),1.0);
    }
}

